【CSS】ボックスモデル

HTML要素のボックスモデルについて解説します。

ボックスモデル

ボックスモデルは“要素領域の考え方”です。

要素のスタイルやレイアウトを意図した通りに扱うために必須の知識となります。

ボックス

ボックスは“要素の領域”です。

ボックスは次のようにContent、Padding、Border、Marginの４つの領域から構成されます。

Content

Contentは“コンテンツ（テキストや画像など）の領域”です。

例えば、p要素ではテキストの部分がContentになります。

<p>CSS : Cascading Style Sheets</p>

高さや横幅は要素内容によって自動計算されますが、高さはheightプロパティ、横幅はwidthプロパティによって指定可能です。

Border

Borderは“PaddingとContentを囲む境界線”です。

通常、Borderは見えませんが、borderプロパティによって、太さやスタイル、色を指定できます。

例えば、p要素の境界線は次のようになります。

<style>
p {
    border: 1px solid black;
}
</style>

<p>CSS : Cascading Style Sheets</p>

※ border: 1px solid black;は太さ（1px）、スタイル（solid）、色（black）の意味です。

Padding

Paddingは“内側の余白（コンテンツと境界線の間の余白）”です。

paddingプロパティによって余白のサイズを指定できます。

例えば、p要素に内側の余白を付けると次のようになります。

<style>
p {
    padding: 30px;
    border: 1px solid black;
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビューからBorderのサンプルと比べてContentとBorderの間に余白があることが確認できます。

Margin

Marginは“外側の余白（境界線の外の余白）”です。

marginプロパティによって余白サイズを指定できます。

例えば、p要素に外側の余白を付けると次のようになります。

<style>
p {
    margin: 30px;
    padding: 30px;
    border: 1px solid black;
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビューからPaddingのサンプルと比べてBorderの上下左右に余白があることが確認できます。

ボックスのサイズ

ボックス全体の高さと横幅は『content + border + padding + margin』の値です。

コンテンツのheightプロパティ（高さ）、widthプロパティ（横幅）とは値が異なることに注意してください。

また、補足ですが、heightプロパティ・widthプロパティを『border + padding + margin』の値とすることができるbox-sizingプロパティがあります。

要素の領域を扱いやすくできるため、多くの開発ではbox-sizingプロパティが使われています。

ボックスの種類

ボックスはブロックボックスとインラインボックスの２種類あります。

要素の種類（h1やp、aなど）によって種類が異なりますが、displayプロパティによって変更が可能です。

ブロックボックス

ブロックボックスは次の特徴があります。

• 縦配置される。
• 横幅は可能な限り伸びる。
• 高さ（height）と横幅（width）を指定できる。
• 内側の余白（padding）、外側の余白（margin）、境界線（border）は他の要素と被らない。

例として、p要素で確認します。

<style>
p {
    border: 1px solid black;
}

#text1 {
    width: 150px;
    height: 80px;
    margin: 30px;
    padding: 30px; 
}
</style>

<p>CSS : Cascading Style Sheets</p>
<p id="text1">CSS : Cascading Style Sheets</p>

インラインボックス

インラインボックスは次の特徴があります。

• 横配置される。（可能な限り）
• 横幅は最小限。
• 高さ（height）と横幅（width）を指定できる要素は一部のみ。
• 内側の余白（padding）、外側の余白（margin）、境界線（border）の一部が他の要素と被る。

例として、a要素で確認します。

<style>
#text1 {
    background: red;
}

#text2 {
    background: green;
    margin: 30px;
    padding: 30px; 
}

#text3 {
    background: blue;
    width: 150px;
    height: 30px;
}
</style>

<a id="text1">CSS : Cascading Style Sheets</a>
<a id="text2">CSS : Cascading Style Sheets</a>
<a id="text3">CSS is a programming language that decorates elements such as HTML and XML.</a>

背景色をbackgroundプロパティで設定し、視覚的に分かりやすくしました。

※ backgroundプロパティはContentとPaddingを合わせた領域の背景を設定します。

３個目のp要素は途中で改行され、他のp要素の内側余白に被っていることが確認できます。